<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <p>{{reverseMsg()}}</p>

        <p>{{getAge()}}</p>
        <p>{{getAge()}}</p>
        <p>{{getAge()}}</p>
        <p>{{age}}</p>
        <p>{{age}}</p>
        <p>{{age}}</p>
        {{msg}}
        <p>{{number|getnum(2)}}</p>
        <p>{{money|getMoney(6)}}</p>
        <p>{{num|getnum(2)|getMoney(9)}}</p>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({

            el: '#app',
            data: {
                msg: 'hello',
                birthday: '2016-4-20',
				number:99.997,
                money: '$20.0',
                num: 20.964
            },
            methods: {
                reverseMsg () {
                    return this.msg.split('').reverse().join('')
                },
                getAge () {
                    console.log('我是方法');
                    return new Date().getFullYear() - new Date(this.birthday).getFullYear()
                }
            },
            computed: {
                age () {
                    console.log('我是计算属性');
                    return new Date().getFullYear() - new Date(this.birthday).getFullYear()
                }
            },
            filters: {
                // 过滤器
                getnum (num, n) {
                    return num.toFixed(n)
                },
                getMoney (money, n) {
                    return money.padEnd(n, 0)
                }
            }
        })

        //	过滤器: 数据|过滤器1(参数2)|过滤器2(参数2)
		// toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法)，"四舍六入五成双"含义：对于位数很多的近似数，当有效位数确定后，其后面多余的数字应该舍去，只保留有效数字最末一位，这种修约（舍入）规则是“四舍六入五成双”，也即“4舍6入5凑偶”这里“四”是指≤4 时舍去，"六"是指≥6时进上，"五"指的是根据5后面的数字来定，当5后有数时，舍5入1；当5后无有效数字时，需要分两种情况来讲：①5前为奇数，舍5入1；②5前为偶数，舍5不进。（0是偶数）
        // 返回值是string 
    </script>
</body>
</html>